<template>
  <div id="app" class="container">
    <new-com />
    <CreateTodoComponent @emit-text="but" />
    <!--    <TodoListComponent msg="hello prop" />-->
    <TodoListComponent :list-data="list" :onnext="onnext" msg="hello prop" />
    <!--
  父组件(自定义属性) -> 子组件(prop 获取)   传值
  子组件 -> 父组件(自定义事件)   传值
  -->
    <!--    <todo-list></todo-list>-->
    <!--    <todo-list></todo-list>-->
  </div>
</template>
<script>
import TodoListComponent from "@/components/TodoListComponent";
import CreateTodoComponent from "@/components/CreateTodoComponent";
import http from "axios";

export default {
  name: "app",
  components: {
    TodoListComponent,
    CreateTodoComponent
    // TodoList: TodoListComponent,
    // 'todo-list': TodoListComponent,
  },
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.h();
    console.log(process.env.NODE_ENV);
    // test development production
    //
    // 页面 进行逻辑处理
    // 子组件只负责展示
  },
  methods: {
    h() {
      http({
        url: "https://api.yizhanketang.cn/api/v1/todos"
      }).then(res => {
        this.list = res.data.data;
        console.log(this.list);
      });
    },
    onnext(id) {
      this.$router.push({
        name: "TodoShow",
        params: {
          id
        }
      });
    },
    but(option) {
      // console.log('======')
      // console.log(option)
      // console.log('我是父组件的but')
      const text = option;
      if (text) {
        // this.list.push(this.text)
        http({
          method: "POST",
          url: "https://api.yizhanketang.cn/api/v1/todos",
          data: {
            content: text
          }
        }).then(() => {
          this.h();
        });
      } else {
        alert("不能为空");
      }
    }
  }
};
</script>

<style lang="less"></style>
